<template>
  <div class="detail">
    <nav-header></nav-header>
    <div class="zcNav">
      <div class="left">
        <left-menu></left-menu>
      </div>
      <div class="rightNav">
        <div class="top">
          <!-- <div class="ff">本页面只做用例统计，如需查看具体用例，请点击详情查看!</div> -->
          <div class="cc">
            <div class="llint">
              <div class="liupload">
                <el-button
                  @click="dialogVisible = true"
                  size="middle"
                  type="primary"
                  class="llupload"
                >用例导入</el-button>

                <el-dialog
                  title="测试用例上传"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClosell"
                >
                  <template>
                    <el-upload
                      class="upload-position"
                      drag
                      :action = address_upload
                      multiple
                    >
                      <i class="el-icon-upload"></i>
                      <div class="el-upload__text">
                        将文件拖到此处，或
                        <em>点击上传</em>
                      </div>
                      <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
                      <div class="el-upload__tip" slot="tip">
                        <div class="tip_left">只能上传xlsx文件,</div>
                        <div class="tip_right" @click="loadModule()">下载模板</div>
                      </div>
                    </el-upload>
                  </template>

                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                  </span>
                </el-dialog>
              </div>
            </div>

            <!-- 导出按钮 -->
            <div class="llout">
              <el-button @click="handleExport" size="middle" type="primary" class="llupload">导出</el-button>
            </div>
            <div class="annotation">注：编写用例编号时必须以【下划线+数字】结尾</div>


            <!-- <div class="left_cersion">
              <span>版本号:</span>
            </div>
            <div class="right">
              <template>
                <el-select v-model="value" clearable placeholder="请选择" size="mini">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </div>

            <div class="butSearch">
              <el-button @click="buttSearch" size="mini" type="primary" icon="el-icon-search">搜索</el-button>
            </div>-->
            <!-- <div class="butReset">
              <el-button size="mini" type="primary" icon="el-icon-search">重置</el-button>
            </div>-->
          </div>
        </div>

        <div class="second">
          <el-table :data="tableData" :border="true"  style="width: 100%">
            <el-table-column align="center" header-align="center" label="版本号" fixed width="80px" prop="version_number" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="用例编号" fixed width="150px" prop="case_id" show-overflow-tooltip></el-table-column>
            <el-table-column align="center"  label="模块名称" width="120px" prop="module_name" show-overflow-tooltip></el-table-column>

            <el-table-column align="center" label="测试标题" width="120px" prop="test_title" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="前置条件" width="200px" prop="condition" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="测试步骤" width="300px" prop="step" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="预期结果" width="270px" prop="forecast_result" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="实际结果" width="270px" prop="result" show-overflow-tooltip></el-table-column>

            <el-table-column align="center" label="测试人员" width="80px" prop="version_person" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="用例编写人员" width="120px" prop="write_person" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="创建时间" width="200px" prop="create_time" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="更新时间" width="200px" prop="update_time" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" label="备注" width="200px" prop="remark" show-overflow-tooltip></el-table-column>

            <el-table-column align="center" fixed="right" label="操作" width="280">
              <template slot-scope="scope">
                <el-button @click="newadd(scope.row)" type="primary" size="small">新增</el-button>

                <el-button
                  type="primary"
                  @click="edit(scope.row)"
                  size="small"
                  style="margin-left: 16px;"
                >编辑</el-button>
                <el-button @click="casedelete(scope.row)" type="primary" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" :modal="false">
          <div class="drawer_title">用例更改</div>
          <el-form
            ref="rowdata"
            :label-position="labelPosition"
            label-width="100px"
            :model="rowdata"
          >
            <el-form-item label="用例编号：">
              <el-input :disabled="true" v-model="rowdata.case_id"></el-input>
              <!-- <el-input v-model="rowdata.case_id"></el-input> -->
            </el-form-item>
            <el-form-item label="模块名称：">
              <el-input v-model="rowdata.module_name"></el-input>
            </el-form-item>
            <el-form-item label="测试标题：">
              <el-input v-model="rowdata.test_title"></el-input>
            </el-form-item>
            <el-form-item label="前置条件：">
              <el-input v-model="rowdata.condition"></el-input>
            </el-form-item>
            <el-form-item label="测试步骤：">
              <el-input v-model="rowdata.step"></el-input>
            </el-form-item>
            <el-form-item label="预期结果：">
              <el-input v-model="rowdata.forecast_result"></el-input>
            </el-form-item>
            <el-form-item label="实际结果：">
              <el-input v-model="rowdata.result"></el-input>
            </el-form-item>

            <el-form-item label="测试人员：">
              <el-input v-model="rowdata.version_person"></el-input>
            </el-form-item>

            <el-form-item label="编写人员：">
              <el-input v-model="rowdata.write_person"></el-input>
            </el-form-item>

            <el-form-item label="备注：">
              <el-input v-model="rowdata.remark"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit(rowdata)">{{butt_name}}</el-button>
              <el-button @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
        <div class="pages">
          <div class="inPages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="1"
              :page-sizes="[10]"
              :page-size="100"
              layout="total, sizes, prev, pager, next, jumper"
              prev-text="上一页"
              next-text="下一页"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import leftMenu from "@/components/leftMenu";
import { api } from "./api/index";
import { exportExcel } from "@/api/download";
import { address } from './../main'

export default {
  data() {
    return {

      address_upload:address + "/case/upload-casefile",
      pro_name: "",
      arg: {},
      pass_param: "",
      butt_name: "",
      drawer: false,
      direction: "rtl",
      options: [
        {
          value: "选项1",
          label: "1.0.0",
        },
      ],
      version: "",
      project_name: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      value: "",
      label: "",
      total: 0, // 总条数
      loading: false,
      labelPosition: "right",
      input2: "",
      drawer: false,
      direction: "rtl",
      dialogVisible: false,
      lis: "",
      tableData: [], // 列表渲染数据
      rowdata: {},
      len: "", // 返回数据的长度
      requstParams: {}, //翻页请求参数
    };
  },
  components: {
    NavHeader,
    leftMenu,
  },
  methods: {
    // 下载模板方法
    loadModule() {
      const url = "/case/export-temp";
      const options = {
        project_name: "测试用例模板",
        project_type: 0,
      };

      exportExcel(url, options); // 下载文件方法
    },
    newadd(rowdata) {
      console.log(rowdata);
      console.log("fff");

      this.version = rowdata.version_number;

      this.butt_name = "新增"; // 更改按钮名字
      this.drawer = !this.drawer;
      let dic = {};
      let num = rowdata.case_id;
      let case_num = "";
      let len = "";
      let lis = num.match(/\d+/g);



      // butt_name;
      if (lis.length > 0) {
        console.log(num);     // dd003
        console.log('=============');
        len = lis[0].length;
        console.log(len);     // 3
        let st = String(num).slice(0, num.length - len); 

        console.log(st); //dd

        console.log(lis[0]);

        console.log(typeof(lis[0]));

        console.log(parseInt(lis[0]));

        console.log(parseFloat(0.1));

        console.log(st + String(parseInt(lis[0]) + parseFloat(0.1)));


        dic.case_id = st + String(parseInt(lis[0] + parseFloat(0.1)))

        dic.case_id = st + String(parseInt(lis[0]) + parseFloat(0.1))

        // console.log(dic.case_id);
        // if (lis[0].length < 5) {
        //   dic.case_id = st + String(lis[0]) + ".1";
        // } else {
        //   dic.case_id = st + String(parseInt(lis[0]) + 1);
        // }
      }
      this.rowdata = dic;
    },

    casedelete(row) {
      console.log(row);
      // 通过版本号和用例编号 删除用例

      let arg_dic = {
        // project_name: this.pass_param.project_name,
        project_name: this.pro_name,
        case_id: row.case_id,
        version_number: row.version_number,
        project_type: "0",
      };

      let data1 = {
        project_name: this.pass_param.project_name,
        version_number: row.version_number,
        project_type: 0,
        page: 1,
      };

      api({
        url: "/case/delete-case",
        method: "POST",
        data: arg_dic,
      })
        .then((da) => {
          if (da.data.status === 10000) {
            this.$message.success("删除成功");
            api({
              url: "/case/case_list",
              method: "GET",
              params: data1,
            }).then((result) => {
              let res = result.data;
              this.total = result.data.totalCount;
              this.tableData = res.data;
            });

            // this.drawer = !this.drawer;
          } else if (da.data.status === 10001) {
            this.$message.success("sql处理异常");
            // this.drawer = !this.drawer;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    edit(row) {
      this.butt_name = "更改";
      this.version = row.version_number;
      this.drawer = !this.drawer;
      this.rowdata = row;
    },
    cancel() {
      this.drawer = false;
    },
    onSubmit(rowdata) {
      console.log(rowdata);
      var dic = {
        project_type: 0,
        // project_name: this.pass_param.project_name,
        project_name: this.pro_name,
        version_number: this.version,
        case_id: rowdata.case_id,
      };

      console.log(dic);

      var req_dic = Object.assign(rowdata, dic);

      console.log(req_dic);

      api({
        url: "/case/proAdd",
        method: "POST",
        data: req_dic,
      })
        .then((da) => {
          if (da.data.status === 10000) {
            this.$message.success(da.data.msg);
            this.drawer = !this.drawer;
            // this.$router.push("detail");
            let data1 = JSON.parse(localStorage.getItem("projectList_arg"));
            api({
              url: "/case/case_list",
              method: "GET",
              params: data1,
            }).then((da) => {
              var paramData = da;

              this.pass_param = paramData;

              console.log(this.pass_param);

              // // 列表数据
              var datalist = paramData.data;
              // //总条数
              this.total = parseInt(paramData.totalCount); //11
              console.log(this.tableData);
              this.tableData = paramData.data.data;

              console.log(this.tableData);
            });
          } else if (da.data.status === 10001) {
            this.$message.success(da.data.msg);
            this.drawer = !this.drawer;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleClose(done) {},
    handleClosell(done) {
      done();
    },
    buttSearch() {},

    handleClick(row) {
      let data = {
        version_number: row.version_number,
        project_name: String(this.project_name),
        page: 1,
      };
    },

    handleExport() {
      const url = "/case/export-case";
      const options = {
        project_name: this.pass_param.project_name,
        version_number: this.pass_param.version_number,
      };

      exportExcel(url, options); // 下载文件方法
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(page_number) {
      this.arg.page = page_number;

      console.log(page_number);
      api({
        url: "/case/case_list",
        method: "GET",
        params: this.arg,
      })
        .then((da) => {
          // console.log(da);
          this.tableData = da.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.arg = JSON.parse(localStorage.getItem("arg"));

    var paramData = JSON.parse(this.$route.params.da);

    this.pass_param = paramData;
    this.pro_name = paramData.project_name;

    // // 列表数据
    var datalist = paramData.data;
    // //总条数
    this.total = parseInt(paramData.totalCount); //11

    this.tableData = paramData.data;
  },
};
</script>

<style lang="scss" scoped>
.upload-position {
  position: relative;
  .el-upload__tip {
    position: absolute;
    top: -50px;
    left: 0px;
    letter-spacing: 1px;
    display: flex;
    justify-content: flex-start;
    .tip_right {
      margin-left: 10px;
      color: red;
      // cursor: pointer;
    }
    .tip_right:hover {
      cursor: pointer;
    }
  }
}

.detail {
  width: 100%;
  height: 100%;
}
.drawer_title {
  text-align: center;
  background: #eee;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  letter-spacing: 5px;
  font-weight: bold;
  margin-bottom: 30px;
}

.el-input {
  width: 300px;
}

.zc {
  height: 100%;
}

.upload-position {
  text-align: center;
}

.zcNav {
  height: calc(100% - 50px);
  display: flex;
  justify-content: flex-start;

  .rightNav {
    background: #fff;
    width: calc(100% - 260px);

    .top {
      height: 60px;
      background: #eee;
      line-height: 60px;
      font-weight: bold;
      font-size: 20px;
      padding-left: 30px;
      letter-spacing: 10px;

      .cc {
        height: 50px;
        // background: yellow;
        display: flex;
        justify-content: flex-start;

        .llint {
          margin-right: 20px;
        }
        .annotation{
          margin-left: 30px;
          padding-top: 5px;
          color: blue;
        }

        .left_cersion {
          margin-left: 50px;
          font-size: 16px;
          padding-top: 4px;
        }

        .butSearch {
          margin-left: 80px;
        }

        .butReset {
          margin-left: 20px;
        }
      }
    }

    .second {
      width: 100%;
    }

    .pages {
      width: 100%;
      height: 70px;
      line-height: 70px;
      text-align: right;

      .inPages {
        margin-top: 40px;
        height: 30px;
      }
    }
  }
}
</style>
